import React, { Component } from 'react'
import Child from './child'

export default class ClassContainer extends Component {
    childRef = React.createRef(null)
    getRef = () => {
        // 父组件通过this.childRef.current可以直接获取到子组件的state值
        this.childRef.current.increment();
    }
    refReset = () => {
        this.childRef.current.setState({ num: 0 })
    }
    render() {
        return (
            <div className='wrapper'>
                <Child ref={this.childRef} />
                <button onClick={this.getRef} className='ml-3 btn btn-danger'>父组件直接调取子组件方法</button>
                <button onClick={this.refReset} className='ml-3 btn btn-warning'>父组件直接更改子组件状态</button>
            </div>
        )
    }
}
